<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size?: 'default' | 'sm' | 'lg' | 'icon'
  asChild?: boolean
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  size: 'default',
  asChild: false
})

const buttonClass = computed(() => {
  const variants = {
    default: 'macos-button-primary',
    destructive: 'macos-button-destructive',
    outline: 'macos-button',
    secondary: 'macos-button',
    ghost: 'macos-button-ghost',
    link: 'macos-button-link'
  }

  const sizes = {
    default: 'h-9 px-4 py-2 text-[13px]',
    sm: 'h-7 px-3 text-[11px]',
    lg: 'h-11 px-6 text-[15px]',
    icon: 'h-9 w-9'
  }

  return cn(
    'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
    variants[props.variant],
    sizes[props.size],
    props.class
  )
})
</script>

<template>
  <button :class="buttonClass">
    <slot />
  </button>
</template>

